<template>
  <div>
    <el-table
      :data="tableDataFormat"
      style="width: 100%"
      :row-style="{ height:'0' }"
      :cell-style="{ padding:'5px' }"
      max-height="500"
      stripe
      border
      highlight-current-row
      :header-cell-style="{ background: '#f0f9eb' }">
      <el-table-column v-if="colnames != null" label="ID" prop="id" width="60px" align="center" header-align="center" type="index"></el-table-column>
      <template v-for="(colname, index) in colnames">
        <el-table-column :label="colname" :prop="colname" :index="index" align="center" header-align="center" width="180px" sortable></el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "dataTable",
    data() {
      return {
      }
    },
    props:{
      tableInData:Array,
        tableData:Array
    },
    computed:{
      colnames(){//获取列名
        if(this.tableInData == null || this.tableInData.length === 0) {
            return null;
        }else{
            for(let col of Object.keys(this.tableInData[0])){
                if(col.toLowerCase().indexOf("pk")!==-1 &&col.toLowerCase().indexOf("id")!==-1){
                    delete this.tableInData[0][col];
                    // console.log(Object.keys(this.tableInData[0]))
                }
            }
        }
        return Object.keys(this.tableInData[0]);
      },
      tableDataFormat(){//数据处理——时间格式化
      //   if(this.tableData == null || this.tableData.length === 0)
      //     return null;
      //   let colnames = Object.keys(this.tableData[0]);
      //   for (let col = 0; col < colnames.length; col++){
      //     if (colnames[col].toLowerCase().indexOf('time') !== -1){
      //       for (let row = 0; row < this.tableData.length; row++){
      //           if((this.tableData[row][colnames[col]]+'').indexOf('-')=== -1){
      //               this.tableData[row][colnames[col]] = this.$date.dateFormat(parseInt(this.tableData[row][colnames[col]]))
      //               // this.tableData[row][colnames[col]] =this.tableData[row][colnames[col]].substring(0,10);
      //           }
      //       }
      //     }
      //   }
      //   return this.tableData;
      // },
        if(this.tableInData == null || this.tableInData.length === 0)
          return null;
        let colnames = Object.keys(this.tableInData[0]);
        for (let col = 0; col < colnames.length; col++){
            if (colnames[col].toLowerCase().indexOf('time') !== -1){
                for (let row = 0; row < this.tableInData.length; row++){
                    if((this.tableInData[row][colnames[col]]+'').indexOf('-')=== -1){
                        this.tableInData[row][colnames[col]] = this.$date.dateFormat(parseInt(this.tableInData[row][colnames[col]]))
                        // this.tableData[row][colnames[col]] =this.tableData[row][colnames[col]].substring(0,10);
                    }
                }
            }
        }
        return this.tableInData;
        },
      // myWidth(){
      //
      //   let col=Object.keys(this.tableData[0]);
      //   for(let i=0;i< col.length;i++){
      //     if(col[i].length<8){
      //         continue;
      //     }else{
      //         myWidth=150+'px';
      //     }
      //   }
      //     return myWidth;
      //   }
    },
    methods: {
      tableRowClassName({row, rowIndex}) {//表格颜色设置，当前为轮询双色
        if (rowIndex % 2 == 0) {
          return 'warning-row';
        } else {
          return 'success-row';
        }
      }
    },
    mounted(){
    }
  }
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
   .el-table .warning-row {
     background: oldlace;
   }
  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
</style>
